import { Outlet } from 'react-router-dom'
import { Button } from 'antd'
import './index.css'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import NavBar from '../Home/NavBar'
import Modal from 'antd/es/modal/Modal'

const menuItem = [
  { id: 0, title: '个人资料', path: 'info' },
  { id: 1, title: '学习路线', path: 'path' },
  { id: 2, title: '每日计划', path: 'daily' },
  { id: 3, title: '收藏资源', path: 'mylikes' },
  { id: 4, title: '学习记录', path: 'record' }
]

export default () => {
  const navigate = useNavigate()
  const location = useLocation()
  const [modal, contextHolder] = Modal.useModal()
  const [chosen, setChosen] = useState(0)
  useEffect(() => {
    const myPath = location.pathname.replace(/\/$/g, '').split('/')
    const type = myPath[myPath.length - 1]
    if (type === 'center') {
      navigate('/center/info')
      return
    }
    menuItem.forEach(item => {
      if (item.path === type) {
        setChosen(item.id)
      }
    })
    if (type === 'login' || type === 'register') {
      setChosen(0)
    } else {
      // TODO，在这里补充登录校验板块
    }
  }, [location.pathname])
  return (
    <div className="UserCenter">
      {/* 菜单栏 */}
      <div className="UserCenter_menu">
        {menuItem.map(item => {
          return (
            <div
              key={item.id}
              className={item.id === chosen ? 'UserCenter_menuItem_chosen' : 'UserCenter_menuItem'}
              onClick={() => {
                setChosen(item.id)
                navigate(item.path)
              }}
            >
              {item.title}
            </div>
          )
        })}
      </div>
      <div>
        <Outlet />
      </div>
      {contextHolder}
    </div>
  )
}
